<script lang="ts" setup>
import { componentList } from '../index'
import { pageStore } from '@/store/modules/pageConfig'
import { storeToRefs } from 'pinia'
import { Hide, View } from '@element-plus/icons-vue'
import type { ContextMenuInstance, AddMenuProps, MeunItem } from '@/components/interfaceType'
import { serach as serach2, homeList as homeList2, layout as layout2, style as style2,backgroundStyle as backgroundStyle2 } from './page.json'
import { deepClone } from '@/utils/util'

let configStore = storeToRefs(pageStore())
let { serach, homeList, layout, style,backgroundStyle } = configStore

const props = defineProps({
    setupCenterDialog: {
        type: Boolean,
        default: false
    },
    onClose: {
        type: Function,
        default: () => { }
    }
})

interface compLocationType {
    [key: string]: string
}


let tabName = ref('0')

let compLocation = ref<compLocationType>({})

let typeList = reactive(['CalendarBox', 'AWord', 'WaitToBeDone'])


let marginPx = ref(Number((style.value?.margin || '0 0px').split(" ")[1].slice(0, -2)))

watch(marginPx, async (newQuestion, oldQuestion) => {
    style.value.margin = '0 ' + marginPx.value + 'px'
})

function getComponentLocation() {
    if(tabName.value == '0') return
    Object.keys(homeList.value).forEach((key) => {
        const items = homeList.value[key] as Array<MeunItem>;
        for (let index = 0; index < items.length; index++) {
            const item = items[index] as MeunItem;
            let type = item.type || ''
            if (typeList.includes(type)) {
                compLocation.value[type] = key
            }

        }
    })
}

//切换组件位置
function switchPosition(key: any, compName: string) {
    s: for (let name in homeList.value) {
        console.log(name)
        const items = homeList.value[name] as Array<MeunItem>;
        for (let index = 0; index < items.length; index++) {
            const item = items[index] as MeunItem;
            let type = item.type || ''
            if (compName == type) {
                console.log(name, compName)
                items.splice(index, 1)
                break s;
            }
        }
    }
    const key2 = compName as keyof typeof config;
    let sdd = config[key2] as unknown as MeunItem
    (homeList.value[key] as MeunItem[]).push(sdd)
}


function restLayout() {
    serach.value = deepClone(serach2)
    homeList.value = deepClone(homeList2)
    layout.value = deepClone(layout2)
    style.value = deepClone(style2)
    backgroundStyle.value = deepClone(backgroundStyle2)
    window.location.reload()
}

let config = reactive({
    'CalendarBox': { name: "日历", id: 7, style: { gridColumnStart: 'span 4', gridRowStart: 'span 3' }, type: 'CalendarBox' },
    'WaitToBeDone': { name: "待办列表", id: 8, style: { gridColumnStart: 'span 4', gridRowStart: 'span 3' }, list: [], type: 'WaitToBeDone' },
    'AWord': { name: "每日一言", id: 9, style: { gridColumnStart: 'span 4', gridRowStart: 'span 1' }, title: "有道翻译", list: [], type: 'AWord' },
})

</script>
<template>
    <!-- :close-on-click-modal="false" -->
    <el-drawer v-model="$props.setupCenterDialog" direction="btt" @close="props.onClose()" :with-header="false"
        size="40%">
        <template #default>
            <el-tabs v-model="tabName" tab-position="left" style="height: 100%" :tab-click="getComponentLocation()">
                <el-tab-pane label="布局" name="0">
                    <div style="margin: 20px;width: 500px;">
                        <el-row :gutter="24">
                            <el-col :span="6">
                                边距：
                            </el-col>
                            <el-col :span="18">
                                <el-slider v-model="marginPx" :max="300" />
                            </el-col>
                        </el-row>
                        <el-row :gutter="24">
                            <el-col :span="6">
                                左边栏：
                            </el-col>
                            <el-col :span="18">
                                <el-switch v-model="layout.leftAsideBox" :active-action-icon="View"
                                    :inactive-action-icon="Hide" />
                            </el-col>
                        </el-row>
                        <el-row :gutter="24">
                            <el-col :span="6">
                                右边栏：
                            </el-col>
                            <el-col :span="18">
                                <el-switch v-model="layout.rightAsideBox" :active-action-icon="View"
                                    :inactive-action-icon="Hide" />
                            </el-col>
                        </el-row>
                        <el-row :gutter="24">
                            <el-col :span="6"></el-col>
                            <el-col :span="12">
                                <el-button type="primary" @click="restLayout">恢复默认布局</el-button>
                            </el-col>
                        </el-row>
                    </div>
                    <!-- <div style="height: inherit;">
                        <el-container style="width: 280px;height: inherit;align-items: center;">
                            <el-aside class="layout">
                                左
                                <el-switch v-model="layout.leftAsideBox" :active-action-icon="View"
                                    :inactive-action-icon="Hide" />
                            </el-aside>
                            <el-main class="layout">主体</el-main>
                            <el-aside class="layout">
                                <div>
                                    右</div>
                                <el-switch v-model="layout.rightAsideBox" :active-action-icon="View"
                                    :inactive-action-icon="Hide" />
                            </el-aside>
                        </el-container>
                    </div> -->
                </el-tab-pane>
                <el-tab-pane label="组件"  name="1">
                    <div class="items">
                    <div class="item move" v-for="element in config" :style="element.style">
                        <component :type="element?.type || ''" :is="componentList[element?.type || 'box']"
                            :config="element" ref="elementRef" class="item2" :style="element.style">
                        </component>

                        <div class="layout-set">
                            <el-radio-group v-model="compLocation[element?.type]" size="large"
                                @change="switchPosition($event, element?.type)">
                                <el-radio-button label="左边栏" value="leftAside" />
                                <el-radio-button label="中间" value="main" />
                                <el-radio-button label="右边栏" value="rightAside" />
                            </el-radio-group>
                        </div>
                    </div>
                </div>
                </el-tab-pane>
            </el-tabs>
        </template>
    </el-drawer>
</template>


<style scoped lang="scss">
.el-tabs {
    .el-row {
        margin-bottom: 20px;
    }

    .el-aside {
        width: 60px;
        display: flex;
        align-items: center;
        flex-direction: column;
        border: 1px solid;
        height: inherit;
        justify-content: center;
    }

    .el-main {
        display: flex;
        align-items: center;
        flex-direction: column;
        border-bottom: 1px solid;
        border-top: 1px solid;
        height: inherit;
        justify-content: center;
    }
}
:deep(.el-col-6){
    text-align: right;
}
:deep(.el-tabs__content) {
    height: inherit;

    &>div {
        height: inherit;
        display: flex;
        //justify-content: space-between;

        &>div {
            height: inherit;
        }
    }
}


.items {
    overflow-y: auto;
    color: white;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(auto-fill, 70px);
    gap: 23px;
    grid-auto-flow: dense;
    grid-auto-rows: 80px;
    width: inherit;
    align-content: center;

    .item {
        height: 100%;
        position: relative;

        .item2 {
            height: 100%;
            border-radius: 10px;
            overflow: hidden;
            filter: drop-shadow(0px 0px 6px black);
        }

        #IconBox {
            filter: unset;

            &:hover {
                filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.3));
            }
        }
    }

    .layout-set {
        display: flex;
        position: absolute;
        // right: 50%;
        top: 0;
        opacity: 0;
        transition: opacity .3s;
        color: red;
        width: 100%;
        height: 100%;
        border-radius: 10px;
        align-items: center;
        justify-content: space-around;
        flex-direction: row;

        &:hover {
            opacity: 1;
            background-color: rgba(0, 0, 0, 0.5);
        }
    }

}
</style>